<template>
  <!-- 概要 -->
  <div class="px-5">
    <van-empty v-if="isEmpty" description="暂无内容" />
    <template v-else>
      <topCardStyle2
        v-show="showAbilitySource"
        title="能力评估"
        unit="分"
        :source="sourceAvg"
        class="mb-4"
        :needStudy="enableImprovement"
        @onClickDetail="onClickDetail('ability')"
      />

      <topCardStyle2
        v-show="showCompletionRate"
        title="任务达成"
        unit="%"
        class="mb-4"
        :source="cp_completionRate"
        :needStudy="false"
        @onClickDetail="onClickDetail('completionRate')"
      />

      <div class="session-view">
        <div class="item-view" v-for="(item, index) in listData" :key="index">
          <van-row align="center" justify="space-between">
            <van-row align="center">
              <h4 class="font-bold">{{ item.title }}</h4>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="item.tip"
                placement="top-end"
              >
                <van-icon name="question-o" color="#C5C5C6" class="info-icon" />
              </el-tooltip>
            </van-row>
            <div>{{ item.value }}</div>
          </van-row>

          <div class="item-view-content mt-2">
            <img :src="item.isPass ? successIcon : failureIcon" />
            <p>{{ item.content }}</p>
          </div>
          <div class="line" v-show="index < 4 - 1"></div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useMinutesStore } from "@/store";
import { showToast } from "vant";
import topCardStyle2 from "./component/topCardStyle2.vue";

import failureIcon from "@/icons/svg/minute/failure_icon.svg";
import successIcon from "@/icons/svg/minute/success_icon.svg";

export default {
  name: "CounsellingOverview",
  data() {
    return {
      successIcon,
      failureIcon,
    };
  },
  components: {
    topCardStyle2,
  },
  emits: ["onClickDetail"],
  methods: {
    showTip(txt) {
      console.log("showTip: ", txt);
      showToast(txt);
    },

    onClickDetail(type) {
      this.$emit("onClickDetail", type);
    },
  },
  computed: {
    ...mapState(useMinutesStore, {
      salesPerformance: "salesPerformance",
      overallEvaluation: "overallEvaluation",
      salesCounsellingReports: "salesCounsellingReports",
      enableImprovement: "enableImprovement",
    }),

    showAbilitySource() {
      return (
        (this.salesCounsellingReports.filter((v) => v.systemId === 205) || []).length > 0
      );
    },

    showCompletionRate() {
      return (
        (this.salesCounsellingReports.filter((v) => v.systemId === 206) || []).length > 0
      );
    },

    //能力评估 平均分
    sourceAvg() {
      let arr = this.salesCounsellingReports.filter((v) => v.systemId === 205) || [];
      if (arr.length === 0) {
        return 0;
      }
      let report = arr[0].report;
      let tasks = report.tasks || [];
      let totalSource = tasks.reduce((sum, item) => {
        let score = parseInt(item.content.score.split("/")[0]);
        return score + sum;
      }, 0);
      if (tasks.length === 0) {
        return 0;
      }
      return (totalSource / tasks.length).toFixed(0);
    },

    // 完成率
    cp_completionRate() {
      let arr = this.salesCounsellingReports.filter((v) => v.systemId === 206) || [];
      if (arr.length === 0) {
        return 0;
      }
      let report = arr[0].report;
      let tasks = report.tasks || [];
      let subTasks = [];
      tasks.forEach((task) => {
        subTasks = subTasks.concat(task.content.evaluationResults.subTasks || []);
      });
      let completedSubTasks = subTasks.filter((v) => v.status === "complete") || [];
      return ((completedSubTasks.length / subTasks.length) * 100 || 0).toFixed(0) || 0;
    },

    isEmpty() {
      return this.listData.length === 0;
    },
    levelClass() {
      let levelClassMap = {
        优秀: "rate-good",
        良好: "rate-normal",
        不合格: "rate-bad",
      };
      return levelClassMap[this.overallEvaluation] || "rate-normal";
    },

    listData() {
      let array = [];
      for (const item of this.salesCounsellingReports) {
        console.log("listData: ", item);
        if (item.name === "销售说话时长占比") {
          array.push({
            title: item.name,
            tip: "销售人员说话总时长 / 会议所有发言人说话总时长，建议值【30%，65%】",
            content:
              "讲述时间偏多，要注意客户的需求和观点是否有足够的传达，建议缩短讲述时间。",
            value: (parseFloat(item.report) * 100).toFixed(0) + "%",
            isPass: item.report >= 0.3 && item.report <= 0.65,
          });
        }

        if (item.name === "销售说话速率") {
          array.push({
            title: item.name,
            tip: "每分钟说话字数，建议值【120，300】字/分钟",
            content:
              "说话速率控制在建议范围内，沟通清晰流畅继续保持这种节奏，有助客户理解和参与讨论。",
            value: item.report + "字/分钟",
            isPass: item.report >= 120 && item.report <= 300,
          });
        }

        if (item.name === "最长销售说辞") {
          array.push({
            title: item.name,
            tip: "销售人员单次连续发言时间最长的一段，建议值【3，10】分钟",
            content:
              "最长销售说辞时间超过了建议时长。长时间的单方面发言可能会导致客户的注意力下降建议适时与客户互动，倾听客户需求。",
            value: item.report + "分钟",
            isPass: item.report >= 3 && item.report <= 10,
          });
        }

        if (item.name === "销售耐心值") {
          array.push({
            title: item.name,
            tip:
              "销售人员在轮到他们发言前的平均等待时间 = 销售人员在轮到他们发言前的等待时间之和 / 发言次数，建议值【10，30】秒",
            content:
              "耐心值在建议范围内，表现出良好的倾听和尊重客户的态度。继续保持这种互动方式，确保客户感受到您的重视和关心。",
            value: item.report || 0 + "秒",
            isPass: item.report >= 10 && item.report <= 30,
          });
        }
      }
      return array;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./counselling.less";

.line {
  height: 0.5px;
  background-color: #e9e9e9;
  margin: 12px 0;
}

.item-view-content {
  display: flex;
  flex-direction: row;
  align-items: start;

  img {
    margin-top: 5px;
  }

  p {
    margin-left: 8px;
    margin-top: 0;
    font-weight: 400;
    font-size: 14px;
    color: #757575;
    line-height: 24px;
  }
}
</style>
